<script>
import ThreeScene from "@/pages/MainPage/ThreeScene.vue"; // 导入 ThreeScene
import { useRouter } from "vue-router";

export default {
  name: "MainPage",
  components: {
    ThreeScene, // 注册组件
  },
  setup() {
    const router = useRouter();

    const navigateToLogin = () => {
      router.push("/login"); // 跳转到登录页
    };

    const navigateToRegister = () => {
      router.push("/register");
    };

    return {
      navigateToLogin,
      navigateToRegister,
    };
  },
};
</script>


<template>
  <div class="min-h-screen flex flex-col bg-gray-900 text-gray-100">
    <!-- 3D 场景 -->
    <main class="relative flex-1 bg-gray-800 ">
      <ThreeScene />
    </main>

    <!-- 登录和注册按钮 -->
    <div class="flex justify-center items-center space-x-80 py-4 mt-auto z-20">
      <button
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-10 rounded"
          @click="navigateToLogin"
      >
        登录
      </button>
      <button
          class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-10 rounded"
          @click="navigateToRegister"
      >
        注册
      </button>
    </div>
  </div>
</template>

<style scoped>
/* 页面整体布局 */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  transition: background-color 0.3s ease;

}

div {
  margin-top: auto; /* 确保按钮显示在页面底部 */
  position: relative;
  z-index: 20; /* 确保按钮位于最上层 */
}
</style>
